<template>
  <!-- 产业计划审核详情 -->
  <div class="specificationdetail-page page-container">
    <back-header></back-header>
    <div class="flex-auto overflow-y">
      <div class="full-height full-width no-scroll-x no-scroll-y flex-column">
        <data-list ref="dataList" :dataConfig="dataConfig" :tableData="tableData"></data-list>
      </div>
    </div>
    <el-dialog title="审核详情" :visible.sync="dialogFormVisible">
      <div class="data-detail">
        <div class="flex-row detail-item">
          <div class="detail-label">技术规范书ID</div>
          <div class="detail-value flex-auto">{{ detailInfo.technicalspecificationsId }}</div>
        </div>
        <div class="flex-row detail-item">
          <div class="detail-label">采购需求名称</div>
          <div class="detail-value flex-auto">{{ detailInfo.demandName }}</div>
        </div>
        <div class="explain-text app-error-color__text">
          <div class="flex-row column-center"><i class="el-icon-star-on app-font-size20"></i><span>技术规范书审核说明</span>
          </div>
        </div>
        <div class="info-area">
          <div v-if="Number(detailInfo.contentValueSign) === 0"
            class="detail-value text-center" style="margin: 30px 0;">未检测到技术规范书</div>
          <template v-else>
            <div class="flex-column detail-item">
              <div class="detail-label detail">技术规范书名称审核意见</div>
              <div class="detail-value">
                <span v-for="(item, index) in detailInfo.technicalspecificationName" :key="index">{{ item }}</span>
              </div>
            </div>
            <div class="flex-column detail-item">
              <div class="detail-label detail">技术规范书第一段审核意见</div>
              <div class="detail-value flex-column">
                <span v-for="(item, index) in detailInfo.typeClass" :key="index">{{ item }}</span>
              </div>
            </div>
            <div class="flex-column detail-item">
              <div class="detail-label detail">技术规范书电压等级审核意见</div>
              <div class="detail-value flex-column">
                <span v-for="(item, index) in detailInfo.voltageClass" :key="index">{{ item }}</span>
              </div>
            </div>
            <div class="flex-column detail-item">
              <div class="detail-label detail">资质、业绩、注册资金、认证证书要求、项目负责人要求等审核意见</div>
              <div class="detail-value flex-column">
                <span v-for="(item, index) in detailInfo.qualifications" :key="index">{{ item }}</span>
              </div>
            </div>
            <div class="flex-column detail-item">
              <div class="detail-label detail">付款比例、履约保证金、质量保证金等与合同相关内容审核意见</div>
              <div class="detail-value flex-column">
                <span v-for="(item, index) in detailInfo.contract" :key="index">{{ item }}</span>
              </div>
            </div>
            <div class="flex-column detail-item">
              <div class="detail-label detail">承包商(供应商)名称、品牌等审核意见</div>
              <div class="detail-value flex-column">
                <span v-for="(item, index) in detailInfo.brand" :key="index">{{ item }}</span>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div slot="footer" class="flex-row flex-center">
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BackHeader from '@/components/business/page-comp/back-header/back-header.vue';
import DataList from '@/components/business/page-comp/data-list/data-list.vue';
import api from '../api/index.js';
export default {
  name: 'SpecificationdetailPage',
  components: {
    BackHeader,
    DataList,
  },
  data() {
    return {
      tableData: {
        data: [],
        total: 0
      },
      dataConfig: {},
      dialogFormVisible: false,
      detailInfo: {},
    };
  },
  computed: {},
  beforeDestroy() { },
  created() {
    this.REVIEW_STATUS = [];
    for (let key in (this.$config.REVIEW_STATUS || {})) {
      this.REVIEW_STATUS.push({ ...this.$config.REVIEW_STATUS[key] });
    }
    // 获取上一个页面传入的参数
    this.mainTaskId = this.$route.query.id;
    this.dataConfig = {
      search: {
        labelWidth: '120px',
        loading: false,
        form: {
          technicalspecificationsId: '',
          demandName: '',
        },
        conditions: [
          {
            label: '技术规范书ID',
            prop: 'technicalspecificationsId',
            type: 'input',
          },
          {
            label: '采购需求名称',
            prop: 'demandName',
            type: 'input',
          },
        ],
        searchCB: this.search,
        topOperates: []
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '技术规范书ID',
            prop: 'technicalspecificationsId',
            width: '220px',
            type: 'text',
          },
          {
            label: '采购需求名称',
            prop: 'demandName',
            type: 'text',
          },
          {
            label: '操作',
            prop: 'status',
            width: '120px',
            type: 'operates',
            fixed: 'right',
            operates: [
              {
                label: '详情',
                type: 'link',
                callback: this.showDetail,
              },
            ]
          },
        ],
      }
    };
  },
  mounted() {
    this.$refs['dataList'].search();
  },
  methods: {
    getStatusText(status) {
      return (this.REVIEW_STATUS.find(item => {
        return String(item.value) === String(status);
      }) || {}).name;
    },
    showDetail(item = {}) {
      // this.$router.push({ path: `/review/subtask/projectdetail`, query: { id: item.id } });
      this.detailInfo = {
        ...item,
        technicalspecificationName: (item.technicalspecificationName || '无审核异常').split(';'),
        typeClass: (item.typeClass || '无审核异常').split(';'),
        voltageClass: (item.voltageClass || '无审核异常').split(';'),
        qualifications: (item.qualifications || '无审核异常').split(';'),
        contract: (item.contract || '无审核异常').split(';'),
        brand: (item.brand || '无审核异常').split(';'),
      };
      this.dialogFormVisible = true;
    },
    search(pageInfo = {}, searchForm = {}) {
      this.dataConfig.search.loading = true;
      let params = {
        ...pageInfo,
        ...searchForm,
        mainTaskId: this.mainTaskId,
      };
      api.queryTechReviewSubTasks(params)
        .then((res) => {
          this.dataConfig.search.loading = false;
          if (res.success) {
            this.$log.debug('查询产业计划审核任务列表成功');
            this.tableData = { data: res.data.techReviewSubTaskList, total: res.data.total };
          } else {
            this.$log.error('查询产业计划审核任务列表失败，错误信息为：', res.message);
            this.$message.error('查询产业计划审核任务列表失败：' + (res.message || ''));
          }
        })
        .catch((e) => {
          this.dataConfig.search.loading = false;
          this.$log.error('查询产业计划审核任务列表失败，错误信息为：', e);
        });
    },
  }
};
</script>

<style lang="scss" scoped>
.specificationdetail-page {}

.data-detail {
  min-height: 300px;

  .detail-item {
    margin-bottom: 10px;
  }

  .info-area {
    border: 1px solid #f4f4f4;
    padding: 10px;
    margin-bottom: 10px;
  }

  .explain-text {
    margin-bottom: 10px;
  }

  .explain-item {
    padding-left: 20px;
  }

  .detail-label {
    color: #000000;
    line-height: 20px;

    &.detail {
      margin-bottom: 5px;
    }
  }

  .detail-value {
    margin-left: 10px;
    line-height: 20px;
    color: #999999;
  }
}
</style>
